<template>
  <div>
    <div style="min-height: 600px; justify-content: center;position: relative" id="map"/>
    <!--预约实验室对话框-->
    <el-dialog v-model="dialogVisible" :title="currentItem.t" width="30%">
      <el-form
          ref="bookFormRef"
          :model="bookForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
          status-icon
      >
        <el-form-item label="预约时间:" prop="book_time">
          <el-date-picker
              v-model="bookForm.book_time"
              style="width: 100%"
              placeholder="请选择预约日期"
              :disabled-date="disabledDate"
              @change="handleSelect"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="实验课节:" prop="book_class">
          <el-select v-model="bookForm.book_class" class="m-2"
                     placeholder="请选择课节"
                     size="large"
                     style="width:100%"
          >
            <el-option v-for="item in ClassType" :key="item.value"
                       :label="item.label" :value="item.value"
                       :disabled="disableclass.includes(item.value)"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="申请原因:" prop="book_reason">
          <el-input v-model="bookForm.book_reason" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleBookConfirm(bookFormRef)">
          确认
        </el-button>
      </span>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import { Scene, ImageLayer, PointLayer} from '@antv/l7';
import { Map } from '@antv/l7-maps';
import {ClassType} from "../../util/type.js";
import axios from "axios";
import {useUserStore} from "../../store/useUserStore.js";
import {ElMessage} from "element-plus";

let scene
let {user} = useUserStore();
onMounted(()=>{
  scene = new Scene({
    id: 'map',
    map: new Map({
      center: [ 500, 500 ],
      zoom: 3,
      version: 'SIMPLE',
      mapSize: 1000,
      maxZoom: 5,
      minZoom: 2,
      pitchEnabled: false,
      rotateEnabled: false
    })
  });
  scene.setBgColor('rgb(94, 182, 140)');

  const imagelayer = new ImageLayer({}).source(
      '/地图.jpg',
      {
        parser: {
          type: 'image',
          extent: [ 360, 400, 640, 600 ]
        }
      }
  );

  scene.on('loaded', () => {
    getLabList()
    scene.addLayer(imagelayer);

  });
})

//获取实验室表数据
const currentItem=ref({})
const getLabList=async () => {
  var res= await axios.get(`/adminapi/labs`)
  var list=res.data.map(item=>({
    x:item.x,
    y:item.y,
    t:"预约"+item.title,
    id:item.id   //为后面预约实验室获取lab_id做准备
  }))
  addTextLayer(list)
}

//添加实验室
const dialogVisible=ref(false)
const bookFormRef=ref()
const bookForm=reactive({
  book_time:"",
  book_class:"",
  book_reason:""
})
const rules=reactive({
  book_time: [
    { required: true, message: '请选择日期：', trigger: 'blur' },
  ],
  book_class: [
    { required: true, message: '请选择课节：', trigger: 'blur' },
  ],
  book_reason: [
    { required: true, message: '请填写申请原因：', trigger: 'blur' },
  ],
})
//取消预约实验室
const handleCancel=() => {
  dialogVisible.value=false
  bookForm.book_time=""
  bookForm.book_class=""
  bookForm.book_reason=""
}
//确认预约实验室
const handleBookConfirm=()=>{
  bookFormRef.value.validate(async (valid)=>{
    if(valid){
      dialogVisible.value=false
      await axios.post(`/adminapi/books`,{
        ...bookForm,
        book_username:user.username,
        lab_id:currentItem.value.id
      })
      bookForm.book_time=""
      bookForm.book_class=""
      bookForm.book_reason=""
      ElMessage({
        message:"提交成功，正在审核中！",
        type:"success"
      })
    }
  })
}
const addTextLayer=(data)=>{
  const textlayer = new PointLayer({ zIndex: 2 })
      .source(
          data,
          {
            parser: {
              type: 'json',
              x: 'x',
              y: 'y'
            }
          }
      )
      .shape('t', 'text')
      .size(14)
      .active({
        color: '#00f',
        mix: 0.9
      })
      .color('rgb(12,168,220)')
      .style({
        textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
        spacing: 2, // 字符间距
        fontWeight: '800',
        padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
        stroke: '#ffffff', // 描边颜色
        strokeWidth: 2, // 描边宽度
        textAllowOverlap: true
      });
  textlayer.on("click",(e)=>{
    dialogVisible.value=true
    currentItem.value=e.feature
  })
  scene.addLayer(textlayer);
}
//禁用日期
const disabledDate=(time)=>{
  return time.getTime() < Date.now() || time.getTime() > (Date.now()+3600*1000*24*7)
}

//过滤已预约日期课节
const disableclass=ref([])
const handleSelect=async ()=>{
  bookForm.book_class=""
  var res=await axios.post(`/adminapi/books/select`,{
    book_time:bookForm.book_time,
    lab_id:currentItem.value.id,
  })
  disableclass.value=res.data.map(item=>item.book_class)
}

</script>

<style scoped>

</style>